<template>
    <div>
        <el-row>
            <el-col>
                <el-form label-width="120px" :model="FinanceLoanDB">
                    <el-row>
                         <el-col :offset="2" :span="9">
                            <el-form-item label="报销类别">
                                <el-input v-model="FinanceLoanDB.Type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="申请人">
                                <el-select width="100%" v-model="FinanceLoanDB.Borrower" filterable placeholder="请选择申请人" style="width:100%">
                                    <el-option value="">请选择请款人</el-option>
                                    <el-option value=" ">全部</el-option>
                                    <el-option v-for="(v,k) in AllUsers" :value="v.Id" :data-userid="v.Id" :label="v.UserName" v-text="v.UserName" />
                                </el-select>
                            </el-form-item> 
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="项目">
                                <el-select v-model="FinanceLoanDB.Project" filterable placeholder="请选择项目" style="width: 100%">
                                    <el-option value="">请选择项目</el-option>
                                    <el-option :value= 0 label=" "> </el-option>
                                    <el-option v-for="(v,k) in AllProject" :value="v.Id" :data-userid="v.Id" :label="v.ProjectName" v-text="v.ProjectName" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                         <el-col :offset="2" :span="9">
                            <el-form-item label="金额">
                                <el-input v-model="FinanceLoanDB.Money"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="报销内容">
                                <el-input v-model="FinanceLoanDB.Content"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="2" :span="9">
                            <el-form-item label="内容摘要">
                                <el-input v-model="FinanceLoanDB.Abstract"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="备注">
                                <el-input v-model="FinanceLoanDB.Remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="20" :offset="2">
                            <el-form-item label="图片上传">
<!--                                <el-image v-for="item in imgArray" :src="item" style="height: 146px;width:146px;padding: 0px 3px" :z-index="3000" :preview-src-list="imgArray"></el-image>-->
                                <div class="imagediv">
                                    <ImagesAssembly :imglist="imgArray"></ImagesAssembly>
                                </div>
                                <upload-file ref="upload_file_refs" style="display: inline-block;margin-right: 10px;display: block"
                                             content="图片选择"
                                             list_type="picture-card"
                                             btnsize=""
                                             :another-data="AnotherData"
                                             :showfilelist="true"
                                              >
                                </upload-file>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="text-align: center">
                        <input type="hidden" id="Id" />
                        <el-button type="success" @click="SaveUpFinanceReimbursement()">修改 </el-button>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <div>
            <el-dialog :visible.sync="AddFinanceLoandetailsShow" width="60%" title="新建单据明细" :append-to-body="true">
                <AddFinanceLoandetails></AddFinanceLoandetails>
            </el-dialog>

            <el-dialog :visible.sync="UpFinanceLoandetailsShow" width="60%" title="修改单据明细"    :append-to-body="true">
                <UpFinanceLoandetails
                                      :form="form"
                                      ></UpFinanceLoandetails>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    import AddFinanceLoandetails from "../FinanceLoan/FinanceLoandetails/AddFinanceLoandetails";
    import UpFinanceLoandetails from "../FinanceLoan/FinanceLoandetails/UpFinanceLoandetails";
    import UploadFile from "../../UploadFile";
    import ImagesAssembly from "../../ImagesAssembly";

    export default {
        name: "UpFinanceReimbursement",
        components: {
            'AddFinanceLoandetails': AddFinanceLoandetails,
            'UpFinanceLoandetails': UpFinanceLoandetails,
            "upload-file": UploadFile,
            'ImagesAssembly':ImagesAssembly,
        },
        props: {
            GetPayArray: {
                type: Array,
                required: true
            },
            AllUsers: {
                type: Array,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllCategory: {
                type: Array,
                required: true
            },
            FinanceLoanDB: {
                type: Object,
                required: true
            },
            //detailed: {
            //    type: Array,
            //    required: true
            //},
        },
        watch: {
            FinanceLoanDB: function (val, oval) {
                val.Money = val.Money.toFixed(2);
                this.FinanceAccounting_Showfc();
                this.InitImg();
                this.GetdetailedDB();
                this.geteditPayeeArray(val);
                this.arraytobystr();
            },
        },
        created() {
            this.InitImg();
            this.GetdetailedDB();
            this.geteditPayeeArray(this.FinanceLoanDB);
            this.FinanceTypechange(this.FinanceLoanDB.FinanceType)
            this.arraytobystr();
        },
        data() {
            return {
                FinanceAccounting_Show:false,
                objcss: {
                    display: "none",
                },
                AddFinanceLoandetailsShow: false,
                UpFinanceLoandetailsShow: false,
                src: '',
                form: {
                    Purpose: "",
                    Money: '',
                    CategoryTwo: '',
                    CategoryOne: '',
                    HasInvoice: false,
                },
                imgArray: [],
                editPayeeArray: [],
                //文件上传参数
                AnotherData: {
                    FileType: 512,
                    id: this.FinanceLoanDB.Id,
                    Type: 0,
                    Single: false,
                },
                detailed: [],
            }
        },
        methods: {
            FinanceAccounting_Showfc() {
                console.log(this.FinanceLoanDB);
                if (this.FinanceLoanDB.ReimMethod == 1) {
                    this.FinanceAccounting_Show = true;
                } else {
                    this.FinanceAccounting_Show = false;
                }
            },
            arraytobystr() {
                var usersstr = this.FinanceLoanDB.TravelPeople;
                if (usersstr != "") {
                    var array = [];
                    if (usersstr.indexOf(',') != -1) {
                        array = usersstr.split(',');
                    } else {
                        array.push(usersstr)
                    }
                var arr = [];
                for (var i = 0; i < array.length; i++) {
                    arr.push(parseInt(array[i]))
                }
                this.FinanceLoanDB.TravelPeople = arr;
                }
            },
            async InitImg() {
                this.imgArray = [];
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, "512," + this.FinanceLoanDB.Id);
            },
            geteditPayeeArray(val) {
                this.editPayeeArray = [];
                this.editPayeeArray.push(val.PayeeType + '');
                this.editPayeeArray.push(val.Payee + '');
            },
            FinanceTypechange(val) {
                if (val != 8) {
                    this.objcss.display = "none";
                }
                else {
                    this.objcss.display = "block";
                }
            },
            GetNameById(id) {
                for (var i = 0; i < this.AllCategory.length; i++) {
                    let Id = parseInt(id)
                    if (Id == this.AllCategory[i].Id) {
                        return this.AllCategory[i].CategoryName;
                    }
                }
            },
            AddFinanceLoandetailsShow_event() {
                this.AddFinanceLoandetailsShow = true;
            },

            _GetAddAllMoney() {
                let sum = 0;
                for (var i = 0; i < this.detailed.length; i++) {
                    sum += parseFloat(this.detailed[i].Money);
                }
                this.FinanceLoanDB.Money = sum.toFixed(2);
            },
            DelAddLoandetails(row, index) {
                this.detailed.splice(index, 1)
                this._GetAddAllMoney();
            },
            GetFinance(row) {
                this.form = row;
                this.UpFinanceLoandetailsShow = true;
            },
            SaveUpFinanceReimbursement() {
                this.FinanceLoanDB.PayeeType = this.editPayeeArray[0];
                this.FinanceLoanDB.Payee = this.editPayeeArray[1];
                if (this.FinanceLoanDB.TravelPeople.length > 0) {
                    this.FinanceLoanDB.TravelPeople = this.FinanceLoanDB.TravelPeople.join(",");
                } else {
                    this.FinanceLoanDB.TravelPeople = "";
                }
                let loadding = this.openLoading();
                this.$http.post("/Finance/UpdateFinanceReimbursement",
                    {
                        finance: this.FinanceLoanDB,
                        financeDocDetails: this.detailed,
                    }
                ).then(res => {
                    loadding.close();
                    if (res.data.IsSuccess) {
                        this.$message.success(res.data.Msg)
                        //文件上传参数
                        this.AnotherData.id = this.FinanceLoanDB.Id;
                        this.$refs['upload_file_refs'].submitUpload()
                        this.$parent.$parent.UpFinanceReimbursementShow = false;
                        this.$parent.$parent.GetFinanceReimbursementDetail();
                    } else {
                        this.$message.error(res.data.Msg)
                    }
                });
            },
            GetdetailedDB() {
                if (this.FinanceLoanDB.ReimNumber != '') {
                    this.$http.get("/Finance/GetfinanceDocDetails?Number=" + this.FinanceLoanDB.ReimNumber+'&type=2' ).then(list => {
                        this.detailed = [];
                        if (list.data.length > 0) {
                            this.detailed = list.data;
                        }
                    });
                } else {
                    this.detailed = [];
                }
            },
        },
        mounted: function () {
            this.FinanceAccounting_Showfc();
        },

    }
</script>

<style scoped>
    .el-table th {
        padding: 0px;
    }
    .imagediv{
        padding: 0px 3px;
    }
    .el-select-dropdown__item {
        width: 270px !important;
    }
</style>
